<template>
  <div>
    <el-tooltip effect="dark" content="图例说明" placement="bottom">
      <div>
        <el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
          <i class="el-icon-warning-outline" style="font-size: 20px;font-weight: 800;"></i>
        </el-button>
      </div>
    </el-tooltip>

    <el-drawer title="图例说明" :visible.sync="drawer" size="300px">
      <div class="drawer_body">
        <el-divider></el-divider>
        <!-- 状态颜色 -->
        <span class="title">
          状态颜色
        </span>
        <div class="data">
          <div class="data_state" v-for="item in colorState" :key="item.state">
            <div :style="item.color" class="box">
            </div>
            <span class="state">{{ item.state }}</span>
          </div>
        </div>
        <el-divider></el-divider>
        <!--  订单标签 -->
        <span class="title">
          订单标签
        </span>
        <div class="data">
          <div class="order" v-for="item in order" :key="item.name">
            <div class="box">
              <div class="label">{{ item.label }}</div>
            </div>
            <div class="state">{{ item.name }}</div>
          </div>
        </div>
        <el-divider></el-divider>
        <!--房间状态  -->
        <span class="title">
          房间状态
        </span>
        <div class="data">
          <div class="room_status" v-for="item in status" :key="item.name">
            <div :style="item.color">
              <div :style="item.label_color" v-if="item.state == 1">{{ item.label }}</div>
              <div :style="item.label_color" v-if="item.state == 0">
                <div :style="item.label_color"></div>
              </div>
            </div>
            <div class="state">{{ item.name }}</div>
            <span></span>
          </div>
          <!-- 维修 -->
          <div class="room_status">
            <div class="box">
              <span id="icon" class="iconfont">&#xe643;</span>
            </div>
            <div class="state">脏房</div>
          </div>
          <div class="room_status">
            <div class="box">
              <span id="icon" class="iconfont">&#xe7f2;</span>
            </div>
            <div class="state">维修房</div>
          </div>
          <div class="room_status">
            <div class="box">
              <span id="icon" class="iconfont"><i id="icon" class="el-icon-remove"></i></span>
            </div>
            <div class="state">停用房</div>
          </div>
          <div class="room_status">
            <div class="box">
              <span id="icon" class="iconfont"><i id="icon" class="el-icon-date"></i></span>
            </div>
            <div class="state">保留房</div>
          </div>
        </div>
        <!-- 入住类型 -->
        <el-divider></el-divider>
        <span class="title">
          入住类型
        </span>
        <div class="data">
          <div class="RoomType">
            <div class="box">
              <div class="time">钟</div>
            </div>
            <div class="state">保留房</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import '../../../../assets/font_sydj6gk6lpo/iconfont.css'//引入阿里巴巴图标
export default {
  data() {
    return {
      drawer: false,
      colorState: [
        {
          state: '待确认',
          color: "background-color:#00e577"
        },
        {
          state: '待付款',
          color: "background-color:#ff5574"
        },
        {
          state: '已预定',
          color: "background-color:#ffaa5c"
        },
        {
          state: '已入住',
          color: "background-color:#32deff"
        }, {
          state: '已退房',
          color: "background-color:#d9d9d9"
        }
      ],
      order: [
        {
          name: '多收',
          label: '多'

        },
        {
          name: '欠款',
          label: '欠'
        },

      ],
      status: [
        {
          name: '预抵',
          label: '抵',
          state: 1,
          color: "background-color:#ffaa5c;width:96px;height:56px;position: relative;",
          label_color: "border-radius: 3px;width: 17px;height: 17px; background-color: #fe9443; color: white; text-align: center; font-size: 12px; position: absolute; left: 75%; top: 58%;"
        },
        {
          name: '预离',
          label: '离',
          state: 1,
          color: "background-color:#cd8dff;width:96px;height:56px;position: relative;",
          label_color: "border-radius: 3px;width: 17px;height: 17px; background-color: #8264ff; color: white; text-align: center; font-size: 12px; position: absolute; left: 75%; top: 58%;"
        },

      ]
    }
  },
  methods: {
    handleClick() {
      console.log("图例说明点击");
      this.drawer = true
      this.$emit('warning', true)
    },

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__title {
  width: 300px !important;
}

#icon {
  text-align: center;
  display: flex;
  color: #666666;
  line-height: 56px;
  font-size: 30px;
  flex-direction: column;
}

.el-drawer__header {
  margin-bottom: 20px !important;
}

.drawer_body {
  .title {
    padding-left: 32px;
  }

  .data {
    padding: 13px 32px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .data_state {
      margin-bottom: 20px;

      .box {
        width: 96px;
        height: 56px;

        .label {
          background-color: red;
        }
      }

      .state {
        display: flex;
        justify-content: space-around;
      }
    }

    .order {
      margin-bottom: 20px;

      .box {
        border: solid 1px #999999;
        width: 96px;
        height: 56px;
        position: relative;

        .label {
          border-radius: 3px;
          width: 17px;
          height: 17px;
          background-color: red;
          color: white;
          text-align: center;
          font-size: 12px;
          position: absolute;
          left: 75%;
          top: 8%;
        }
      }

      .state {
        display: flex;
        justify-content: space-around;
      }
    }

    .room_status {
      margin-bottom: 20px;

      .box {
        width: 96px;
        height: 56px;
        position: relative;
        background-color: #999999;

        .label {
          border-radius: 3px;
          width: 17px;
          height: 17px;
          background-color: red;
          color: white;
          text-align: center;
          font-size: 12px;
          position: absolute;
          left: 75%;
          top: 58%;
        }
      }

      .state {
        display: flex;
        justify-content: space-around;
      }
    }

    .RoomType {
      .box {
        width: 96px;
        border: 1px solid #999999;
        height: 56px;
        position: relative;

        .time {
          position: absolute;
          font-size: 12px;
          width: 17px;
          height: 17px;
          text-align: center;
          left: 75%;
          top: 10%;
          background-color: #02cf9e;
          color: white;
          border-radius: 3px;
        }
      }

      .state {
        display: flex;
        justify-content: space-around;
      }
    }
  }

  .el-divider--horizontal {
    margin: 0px;
    margin-bottom: 20px;
  }
}
</style>